<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS浮动demo</title>
  <style>
    *{margin: 0;padding: 0}
    ul{list-style: none}
    a{text-decoration: none}
    .container{width: 1200px;margin:0 auto}
    .header{width: 1200px;background-color: #ccc;overflow: hidden;zoom: 1;}
    .header .logo{width: 251px;height: 143px;float: left;margin: 0 40px;background-color: #8edff3;line-height: 143px;text-align: center}
    .header .nav{float: right;overflow: hidden;padding-right: 40px;}
    .header .nav li{float: left;margin-right: 20px;    }
    .header .nav li a{padding: 0 20px;height: 143px;line-height: 143px;display: block;font-family: 微软雅黑,serif;font-size: 16px;color: #333;}
    .header .nav li a:hover{color: white}
    .main{width: 1200px;overflow: hidden;zoom: 1;}
    .main .con{width: 1000px;height: 500px;background-color: blue;float: left;}
    .main .sidebar{width: 200px;height: 500px;background-color: orange;float: left;}
    .main, .footer{font-size: 22px;color: white;}
    .footer{width: 1200px;height: 200px;background-color: #e9394a;}
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <div class="logo">Logo</div>
      <ul class="nav">
        <li><a href="#">免费课程</a></li>
        <li><a href="#">职业路径</a></li>
        <li><a href="#">实战</a></li>
        <li><a href="#">猿问</a></li>
        <li><a href="#">手记</a></li>
      </ul>
    </div>
    <div class="main">
      <div class="con">content</div>
      <div class="sidebar">sidebar</div>
    </div>
    <div class="footer">footer</div>
  </div>
</body>
</html>